<template>
  <div class="layout">
    <div id="app">
      <div>
        <section class="page-header" style="color: rgb(255, 255, 255)">
          <div style="position: absolute; top: 20px; right: 20px; z-index: 2">
            <button
              type="button"
              class="el-button el-tooltip el-button--default is-circle"
              aria-describedby="el-tooltip-1682"
              tabindex="0"
            >
              <!----><i class="el-icon-rank"></i
              ><!---->
            </button>
          </div>
          <div style="position: absolute; top: 125px; left: 413px; z-index: 1">
            <font style="font-size: 31px; color: rgb(255, 255, 255)"
              ><b>♪</b></font
            >
          </div>
          <div style="position: absolute; top: 282px; left: 868px; z-index: 1">
            <font style="font-size: 31px; color: rgb(255, 255, 255)"
              ><b>♪</b></font
            >
          </div>
          <div style="position: absolute; top: 42px; left: 383px; z-index: 1">
            <font style="font-size: 30px; color: rgb(255, 255, 255)"
              ><b>♪</b></font
            >
          </div>
          <div style="position: absolute; top: 158px; left: 117px; z-index: 1">
            <font style="font-size: 39px; color: rgb(255, 255, 255)"
              ><b>♪</b></font
            >
          </div>
          <div style="position: absolute; top: 30px; left: 304px; z-index: 1">
            <font style="font-size: 20px; color: rgb(255, 255, 255)"
              ><b>♪</b></font
            >
          </div>
          <div style="position: absolute; top: 157px; left: 228px; z-index: 1">
            <font style="font-size: 28px; color: rgb(255, 255, 255)"
              ><b>♪</b></font
            >
          </div>
          <div style="position: absolute; top: 107px; left: 202px; z-index: 1">
            <font style="font-size: 27px; color: rgb(255, 255, 255)"
              ><b>♪</b></font
            >
          </div>
          <div style="position: absolute; top: 37px; left: 979px; z-index: 1">
            <font style="font-size: 31px; color: rgb(255, 255, 255)"
              ><b>♪</b></font
            >
          </div>
          <div style="position: absolute; top: 126px; left: 209px; z-index: 1">
            <font style="font-size: 25px; color: rgb(255, 255, 255)"
              ><b>♪</b></font
            >
          </div>
          <div style="position: absolute; top: 39px; left: 101px; z-index: 1">
            <font style="font-size: 29px; color: rgb(255, 255, 255)"
              ><b>♪</b></font
            >
          </div>
          <div style="position: absolute; top: 121px; left: 1266px; z-index: 1">
            <font style="font-size: 35px; color: rgb(255, 255, 255)"
              ><b>♪</b></font
            >
          </div>
          <div style="position: absolute; top: 291px; left: 330px; z-index: 1">
            <font style="font-size: 20px; color: rgb(255, 255, 255)"
              ><b>♪</b></font
            >
          </div>
          <h1 class="project-name">Laziji</h1>
          <h2 class="project-tagline">欢迎来到辣子鸡的个人博客。</h2>
          <a href="https://github.com/GitHub-Laziji" target="_blank" class="btn"
            >GitHub主页</a
          >
          <a
            href="https://github.com/GitHub-Laziji/vblog"
            target="_blank"
            class="btn"
            >博客源码</a
          >
        </section>
        <div
          style="
            position: relative;
            z-index: 2;
            margin: -30px auto auto;
            width: 64rem;
          "
        >
          <div class="el-card is-never-shadow">
            <!---->
            <div class="el-card__body" style="padding: 0px">
              <div class="el-row">
                <div class="el-col el-col-10">
                  <ul role="menubar" class="el-menu--horizontal el-menu">
                    <li
                      role="menuitem"
                      aria-haspopup="true"
                      class="el-submenu"
                      tabindex="0"
                    >
                      <div
                        class="el-submenu__title"
                        style="border-bottom-color: transparent"
                      >
                        了解博主<i
                          class="el-submenu__icon-arrow el-icon-arrow-down"
                        ></i>
                      </div>
                      <div class="el-menu--horizontal" style="display: none">
                        <ul
                          role="menu"
                          class="el-menu el-menu--popup el-menu--popup-bottom-start"
                        >
                          <li
                            role="menuitem"
                            tabindex="-1"
                            class="el-menu-item"
                          >
                            github主页
                          </li>
                          <li
                            role="menuitem"
                            tabindex="-1"
                            class="el-menu-item"
                          >
                            其他博客
                          </li>
                        </ul>
                      </div>
                    </li>
                    <li
                      role="menuitem"
                      aria-haspopup="true"
                      class="el-submenu"
                      tabindex="0"
                    >
                      <div
                        class="el-submenu__title"
                        style="border-bottom-color: transparent"
                      >
                        其他网站<i
                          class="el-submenu__icon-arrow el-icon-arrow-down"
                        ></i>
                      </div>
                      <div class="el-menu--horizontal" style="display: none">
                        <ul
                          role="menu"
                          class="el-menu el-menu--popup el-menu--popup-bottom-start"
                        >
                          <li
                            role="menuitem"
                            tabindex="-1"
                            class="el-menu-item"
                          >
                            segmentfault
                          </li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </div>
                <div
                  class="el-col el-col-8"
                  style="text-align: center; padding: 12px 0px 0px 10px"
                >
                  <div class="el-row">
                    <div class="el-col el-col-4">
                      <span
                        ><div
                          role="tooltip"
                          id="el-popover-3012"
                          aria-hidden="true"
                          class="el-popover el-popper"
                          tabindex="0"
                          style="display: none"
                        >
                          <!---->
                          <div style="text-align: center">
                            <div
                              role="progressbar"
                              aria-valuenow="100"
                              aria-valuemin="0"
                              aria-valuemax="100"
                              class="el-progress el-progress--circle"
                            >
                              <div
                                class="el-progress-circle"
                                style="height: 126px; width: 126px"
                              >
                                <svg viewBox="0 0 100 100">
                                  <path
                                    d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94"
                                    stroke="#e5e9f2"
                                    stroke-width="4.8"
                                    fill="none"
                                    class="el-progress-circle__track"
                                  ></path>
                                  <path
                                    d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94"
                                    stroke-linecap="round"
                                    stroke="#67C23A"
                                    stroke-width="4.8"
                                    fill="none"
                                    class="el-progress-circle__path"
                                    style="
                                      stroke-dasharray: 299.08px, 299.08px;
                                      stroke-dashoffset: 0px;
                                      transition: stroke-dashoffset 0.6s ease 0s,
                                        stroke 0.6s ease 0s;
                                    "
                                  ></path>
                                </svg>
                              </div>
                              <div
                                class="el-progress__text"
                                style="font-size: 16px"
                              >
                                100%
                              </div>
                            </div>
                            <br />
                            <button
                              type="button"
                              class="el-button el-button--default is-circle"
                            >
                              <!----><i class="el-icon-minus"></i
                              ><!---->
                            </button>
                            <button
                              type="button"
                              class="el-button el-button--default is-circle"
                            >
                              <!----><i class="el-icon-plus"></i
                              ><!---->
                            </button>
                          </div>
                        </div>
                        <button
                          type="button"
                          class="el-button el-button--default is-circle el-popover__reference"
                          id="play"
                          aria-describedby="el-popover-3012"
                          tabindex="0"
                        >
                          <!----><i class="el-icon-caret-right"></i
                          ><!---->
                        </button></span
                      >
                    </div>
                    <div class="el-col el-col-14" style="padding-left: 20px">
                      <div
                        role="slider"
                        aria-valuemin="0"
                        aria-valuemax="0"
                        aria-orientation="horizontal"
                        class="el-slider"
                        aria-valuetext="0"
                        aria-label="slider between 0 and 0"
                        style="width: 100%"
                      >
                        <!---->
                        <div class="el-slider__runway">
                          <div class="el-slider__bar" style="left: 0%"></div>
                          <div tabindex="0" class="el-slider__button-wrapper">
                            <div
                              class="el-slider__button el-tooltip"
                              aria-describedby="el-tooltip-8909"
                              tabindex="0"
                            ></div>
                          </div>
                          <!---->
                        </div>
                      </div>
                    </div>
                    <div
                      class="el-col el-col-6"
                      style="
                        padding: 9px 0px 0px 10px;
                        color: rgb(144, 147, 153);
                        font-size: 13px;
                      "
                    >
                      00:00/00:00
                    </div>
                  </div>
                  <audio loop="loop">
                    <source
                      src="http://sc1.111ttt.cn:8282/2018/1/03m/13/396131232171.m4a?tflag=1519095601&amp;pin=6cd414115fdb9a950d827487b16b5f97#.mp3"
                      type="audio/mpeg"
                    />
                  </audio>
                </div>
                <div class="el-col el-col-4" style="text-align: right">
                  <div
                    style="
                      font-size: 20px;
                      color: rgb(96, 98, 102);
                      margin-top: 5px;
                    "
                  >
                    <b>GitHub-Laziji</b>
                  </div>
                  <div style="color: rgb(96, 98, 102)">
                    <i class="el-icon-location"></i>&nbsp;fuzhou <br />
                  </div>
                </div>
                <div class="el-col el-col-2" style="text-align: center">
                  <img
                    class="el-popover__reference"
                    aria-describedby="el-popover-1609"
                    tabindex="0"
                    style="
                      margin-top: 4px;
                      margin-right: 10px;
                      width: 52px;
                      height: 52px;
                      border-radius: 5px;
                      border: 1px solid rgb(235, 238, 245);
                    "
                    src="https://avatars0.githubusercontent.com/u/30425217?v=4"
                  />
                  <span
                    ><div
                      role="tooltip"
                      id="el-popover-1609"
                      aria-hidden="true"
                      class="el-popover el-popper"
                      tabindex="0"
                      style="width: 200px; display: none"
                    >
                      <div class="el-popover__title">GitHub-Laziji</div>
                      <i class="el-icon-star-on"></i> 辣子鸡 <br />
                      <i class="el-icon-location"></i> fuzhou <br />
                      <img
                        style="width: 200px; height: 200px"
                        src="https://avatars0.githubusercontent.com/u/30425217?v=4"
                      /></div
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <section class="main-content">
          <div class="el-row">
            <div class="el-col el-col-6" style="padding-right: 10px">
              <div>
                <div class="el-card is-never-shadow">
                  <!---->
                  <div class="el-card__body">
                    <ul role="menubar" class="el-menu">
                      <g-link to="/" exact class="g-link-menu">
                        <li
                          role="menuitem"
                          tabindex="-1"
                          class="el-menu-item"
                          style="padding-left: 20px"
                        >
                          <i class="el-icon-star-off"></i> <span>最新动态</span>
                        </li>
                      </g-link>
                      <g-link to="/social" class="g-link-menu">
                        <li
                          role="menuitem"
                          tabindex="-1"
                          class="el-menu-item"
                          style="padding-left: 20px"
                        >
                          <i class="el-icon-mobile-phone"></i>
                          <span>社交圈</span>
                        </li>
                      </g-link>
                      <g-link to="/blog" class="g-link-menu">
                        <li
                          role="menuitem"
                          tabindex="-1"
                          class="el-menu-item"
                          style="padding-left: 20px"
                        >
                          <i class="el-icon-edit-outline"></i>
                          <span>博客列表</span>
                        </li>
                      </g-link>
                      <g-link to="/project" class="g-link-menu">  
                        <li
                          role="menuitem"
                          tabindex="-1"
                          class="el-menu-item"
                          style="padding-left: 20px"
                        >
                          <i class="el-icon-service"></i> <span>开源项目</span>
                        </li>
                      </g-link>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        class="el-menu-item"
                        style="padding-left: 20px"
                      >
                        <i class="el-icon-printer"></i> <span>使用帮助</span>
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        class="el-menu-item"
                        style="padding-left: 20px"
                      >
                        <i class="el-icon-document"></i> <span>README.md</span>
                      </li>
                      <!----><!----><!----><!----><!----><!----><!---->
                    </ul>
                  </div>
                </div>
                <div
                  class="el-card is-never-shadow"
                  style="margin-top: 20px; text-align: center"
                >
                  <!---->
                  <div class="el-card__body">
                    <div
                      style="
                        font-size: 0.9rem;
                        line-height: 1.5;
                        color: rgb(96, 108, 113);
                      "
                    >
                      <span class="el-tag el-tag--danger el-tag--small"
                        >&nbsp;<!----></span
                      >&nbsp;&nbsp; Token未绑定&nbsp;&nbsp;
                      <button type="button" class="el-button el-button--text">
                        <!----><!----><span>绑定</span>
                      </button>
                    </div>
                    <!---->
                    <div style="margin-top: 10px; text-align: left">
                      <div role="alert" class="el-alert el-alert--info">
                        <!---->
                        <div class="el-alert__content">
                          <span class="el-alert__title is-bold">Token获取</span>
                          <p class="el-alert__description">
                            在 github-&gt; settings-&gt; developerSettings-&gt;
                            personalAccessTokens 勾选gist权限,获取Token.
                            详情参考README.md
                          </p>
                          <i
                            class="el-alert__closebtn el-icon-close"
                            style="display: none"
                          ></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="el-dialog__wrapper" style="display: none">
                    <div
                      class="el-dialog"
                      style="width: 500px; margin-top: 15vh"
                    >
                      <div class="el-dialog__header">
                        <span class="el-dialog__title">绑定Token</span
                        ><button
                          type="button"
                          aria-label="Close"
                          class="el-dialog__headerbtn"
                        >
                          <i class="el-dialog__close el-icon el-icon-close"></i>
                        </button>
                      </div>
                      <!---->
                      <div class="el-dialog__footer">
                        <span class="dialog-footer"
                          ><button
                            type="button"
                            class="el-button el-button--default"
                          >
                            <!----><!----><span>取 消</span>
                          </button>
                          <button
                            type="button"
                            class="el-button el-button--primary"
                          >
                            <!----><!----><span>确 定</span>
                          </button></span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="el-col el-col-18" style="padding-left: 10px">
              <slot />
            </div>
          </div>
        </section>
        <section class="foot">
          <div
            style="
              border-top: 1px solid rgb(225, 228, 232) !important;
              padding: 45px 0px;
            "
          >
            <div class="el-row">
              <div class="el-col el-col-10">
                <div>
                  © 2018 GitHub-Laziji  
                  <a href="https://github.com/GitHub-Laziji" target="_blank"
                    >Profile</a
                  >  
                  <a
                    href="https://github.com/GitHub-Laziji/vblog"
                    target="_blank"
                    >VBlog</a
                  >
                </div>
              </div>
              <div class="el-col el-col-4">
                <div style="text-align: center; font-size: 18px">
                  <i class="el-icon-location-outline"></i>
                </div>
              </div>
              <div class="el-col el-col-10">
                <div style="float: right">
                  <a href="https://developer.github.com" target="_blank"
                    >GitHub-API</a
                  >  
                  <a href="https://cn.vuejs.org/" target="_blank">Vue.js</a>  
                  <a href="http://element.eleme.io/" target="_blank">Element</a>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- <header class="header">
      <strong>
        <g-link to="/">{{ $static.metadata.siteName }}</g-link>
      </strong>
      <nav class="nav">
        <g-link class="nav__link" to="/">Home</g-link>
        <g-link class="nav__link" to="/about/">About</g-link>
      </nav>
    </header>
    <slot /> -->
  </div>
</template>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style>
</style>
